<template>
  <!--轮播-->
  <div id="carousel">
    <a href="#" ref="pic">
        <img v-for="(item, index) in imgList" :key="index" :src="item.url" :alt="index">
    </a>
    <div class="banner-focus" ref="bannerFocus">
      <a href="javascript:void(0);" @click="active" :att="0" class="active"></a>
      <a href="javascript:void(0);" v-for="index of imgLen - 1" :key="index" @click="active" :att="index"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  data () {
    return {
      imgList: [],
      // 设置为0的时候会报数组长度错误（数据渲染时问题，最开始渲染的其实默认设置的值，如果为0，则第一次渲染时就是0，所以报错），
      // 设置为1主要是为了掩盖错误消息
      // 其实设任何值都可以（vue动态更新数据），因为长度是根据图片数量从后台传过来的
      imgLen: 1,
      // 记录是否是第一次进入当前网页击切换轮播图(刷新后或者第一次打开这个网页即为第一次)
      record: 0,
      timer: null
    }
  },
  methods: {
    active (ev) {
      // 关闭定时器
      clearInterval(this.timer)
      this.record += 1
      // 第一步：将目标下标设置为高亮
      // 获取父元素
      var parent = ev.target.parentNode
      // 先把所有父元素下面的所有a标签取消高亮
      var childLIst = parent.childNodes
      for (let i = 0, len = childLIst.length; i < len; i++) {
        childLIst[i].className = ''
      }
      // 在把当前点击的目标展示为高亮
      ev.target.className = 'active'

      // 第二步：将页面切换到目标页面
      var picList = this.$refs.pic.childNodes
      for (var i = 0, len = picList.length; i < len; i++) {
        // 将所有图片取消高亮
        if (this.record === 1 && i === 0) {
          // 如果是第一次打开网页点击轮播图切换的话，我们处理了第一张轮播图不会被隐藏，因为设置为隐藏的话当最开始的时候由第一张切换到
          // 第二张时有空白间隙
          picList[i].style.zIndex = 1
          picList[i].style.opacity = 1
        } else {
          picList[i].style.zIndex = 0
          picList[i].style.opacity = 0
        }
        if (i === parseInt(ev.target.getAttribute('att'))) {
          // 将当前目标的图片显示高亮
          picList[i].style.zIndex = 1
          picList[i].style.transition = 'opacity 1.5s'
          picList[i].style.opacity = 1
        }
      }
      // 开启定时器（与上面关闭定时器作为统一处理，其目的就是为了重启定时器）
      this.refresh()
    },
    // 从服务器获取轮播图片
    getCarouselPic () {
      this.axios.get('CarouselServlet.main').then(result => {
        if (result.status === 200) {
          this.imgList = result.data
          this.imgLen = result.data.length
        }
      })
    },
    // 主要用于在自动切换轮播图中倒计时时如果重新点击某一张图片将会重新刷新为4秒钟切换到下一张(解决在倒计时当中点击的图片后未停留4s就跳到下一张)
    refresh () {
      function UseMouseEvent () {}
      var bannerFocus = this.$refs.bannerFocus
      this.timer = setInterval(() => {
        for (var i = 0, len = bannerFocus.children.length; i < len; i++) {
          if (bannerFocus.children[i].className === 'active') {
            // 判断是否为最后一张
            if (parseInt(bannerFocus.children[i].getAttribute('att')) === bannerFocus.children.length - 1) {
              UseMouseEvent.target = bannerFocus.children[0]
              this.active(UseMouseEvent)
              break
            }
            // MouseEvent.target = bannerFocus.children[i + 1]
            // this.active(MouseEvent)
            UseMouseEvent.target = bannerFocus.children[i + 1]
            this.active(UseMouseEvent)
            break
          }
        }
      }, 4000)
    }
  },
  created () {
    this.getCarouselPic()
  },
  updated () {
    // 自动播放幻化灯
    // 自定义MouseEvent
    function UseMouseEvent () {}
    var bannerFocus = this.$refs.bannerFocus
    this.timer = setInterval(() => {
      for (var i = 0, len = bannerFocus.children.length; i < len; i++) {
        if (bannerFocus.children[i].className === 'active') {
          // 判断是否为最后一张
          if (parseInt(bannerFocus.children[i].getAttribute('att')) === bannerFocus.children.length - 1) {
            UseMouseEvent.target = bannerFocus.children[0]
            this.active(UseMouseEvent)
            break
          }
          // MouseEvent.target = bannerFocus.children[i + 1]
          // this.active(MouseEvent)
          UseMouseEvent.target = bannerFocus.children[i + 1]
          this.active(UseMouseEvent)
          break
        }
      }
    }, 4000)
  }
}
</script>

<style scoped>
  #carousel {
    position: relative;
    width: 1220px;
    height: 499px;
    margin: 25px auto;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .14);
    background: #fff;
  }

  #carousel img {
    width: 100%;
    margin-top: -27px;
    position: absolute;
    opacity: 0;
  }
  #carousel img:first-of-type {
    z-index: 1;
    opacity: 1;
  }

  #carousel > .banner-focus {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: -10px;
    text-align: center;
    z-index: 99;
  }
  #carousel > .banner-focus > a {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: url("../../../assets/images/carousel/focus.png");
  }
  #carousel > .banner-focus > a.active {
    background: url("../../../assets/images/carousel/focus-active.png") no-repeat;
    background-size: contain;
  }

</style>
